import React, { Component, Fragment } from 'react';
import { Slider, Divider } from 'antd';
import L from "leaflet";
import 'leaflet-side-by-side';
import { port, tileUrl, tiandituUrl, mapExtent } from "../../../assets/global";
import "leaflet/dist/leaflet.css";
import style from "./index.module.css";

const marks = {
    2005: '2005年',
    2008: '2008年',
    2011: '2011年',
    2014: '2014年',
    2017: '2017年',
    2020: '2020年'
};

class BaseGeoData extends Component {
    constructor(props){
        super(props);
        this.state = {
            "yearL": "2010",
            "yearR": "2020"
        };

        this.onSliderChange = this.onSliderChange.bind(this);
    }

    componentDidMount(){
        this.map = new Map();
        this.map.init(style["map"], this.state.yearL, this.state.yearR, port[this.props.portName].center);
    }

    componentWillUnmount(){
        this.map.remove();
    }

    render() {
        return (
            <Fragment>
                <div id={style["map"]}></div>
                <div className={style['sliderBox']}>
                    <Slider
                        className={style['slider']}
                        marks={marks}
                        min={2005}
                        max={2020}
                        onChange={value => this.onSliderChange("left", value)}
                    />
                    <Divider className={style['divider']} dashed type='vertical' />
                    <Slider
                        className={style['slider']}
                        marks={marks}
                        defaultValue={2020}
                        min={2005}
                        max={2020}
                        onChange={value => this.onSliderChange('right', value)}
                    />
                </div>
            </Fragment>
        )
    }

    onSliderChange(side, year){
        let obj;
        if(side === "left"){
            obj = { "yearL": year };
        }
        else{
            obj = { "yearR": year };
        }
        this.map.changeYear(side, year);
        this.setState(obj);
    }
}

class Map{
    constructor(){
        this.map = null;
        this.layerL = null;
        this.layerR = null;
        this.compareControl = null;
    }

    init(id, yearL, yearR, mapCenter){
        this.map = L.map(id, {
            crs: L.CRS.EPSG4326,
            minZoom: 9,
            maxZoom: 15,
            zoom: 9,
            center: mapCenter,
            maxBounds: L.latLngBounds(L.latLng(mapExtent.lt.latitude, mapExtent.lt.longitude), L.latLng(mapExtent.rb.latitude, mapExtent.rb.longitude)),
            zoomControl: false,
            attributionControl: false
        });
        L.control.scale({ "imperial": false }).addTo(this.map);
        L.control.scale({ "imperial": false, "position": "bottomright" }).addTo(this.map);
        this.layerL = this.getLayer(yearL).addTo(this.map);
        this.layerR = this.getLayer(yearR).addTo(this.map);
        this.compareControl = L.control.sideBySide(this.layerL, this.layerR);
        this.compareControl.addTo(this.map);
    }

    changeYear(side, year){
        if(side === "left"){
            this.layerL.removeFrom(this.map);
            this.layerL = this.getLayer(year).addTo(this.map);
            this.compareControl.setLeftLayers(this.layerL);
        }
        if(side === "right"){
            this.layerR.removeFrom(this.map);
            this.layerR = this.getLayer(year).addTo(this.map);
            this.compareControl.setRightLayers(this.layerR);
        }
    }

    remove(){
        this.map.removeControl(this.compareControl);
        this.map.remove();
    }

    getLayer(year){
        //2017 - 2020年使用2020年的影像做为底图
        if(year < 2016){
            return L.tileLayer(`${tileUrl}/${year}/{x}/{y}/{z}`);
        }
        else{
            return L.tileLayer(tiandituUrl, { zoomOffset: 1, maxZoom: 15, "attribution": `2020年12月` });
        }
    }
}

export default BaseGeoData;